<template>
    <div>
        <div>
            <van-nav-bar
                    right-text="≡"
                    left-text="返回"
                    left-arrow
                    @click-left="tzback()"
            />
        </div>
        <div>
            <div>
                <img class="img1" :src="playdetail.imgurl1" />
                <van-card
                        :title="playdetail.title"
                        :desc="playdetail.address"
                        :thumb="playdetail.imgurl2"
                >
                    <template #footer>
                        <p>人均：{{playdetail.price}}/人</p>
                        <van-rate v-model="value" />：3分
                        <p>{{playdetail.worktime}}</p>
                    </template>
                </van-card>
            </div>
        </div>
        <div>
            <van-tabs v-model:active="activeName">
                <van-tab title="今天" name="a">
                    <van-row>
                        <van-col span="3"><lable >包房</lable></van-col>
                    </van-row>
                    <van-row>
                        <van-col span="12"><lable >无最低消费限制|建议2-6人</lable></van-col>
                        <van-col span="12"><van-button round type="primary" style="height: 2rem;background-color: orange;border: none;" @click="tzpay()">预定</van-button></van-col>
                    </van-row>
                    <van-row>
                        <van-col span="6"><lable style="color:red;">￥50</lable>预付定金</van-col>
                    </van-row>
                </van-tab>
                <van-tab title="明天" name="b">
                    <van-row>
                        <van-col span="3"><lable >包房</lable></van-col>
                    </van-row>
                    <van-row>
                        <van-col span="12"><lable >无最低消费限制|建议2-6人</lable></van-col>
                        <van-col span="12"><van-button round type="primary" style="height: 2rem;background-color: orange;border: none;" @click="tzpay()">预定</van-button></van-col>
                    </van-row>
                    <van-row>
                        <van-col span="6"><lable style="color:red;">￥50</lable>预付定金</van-col>
                    </van-row>
                </van-tab>
                <van-tab title="后天" name="c">
                    <van-row>
                        <van-col span="3"><lable >包房</lable></van-col>
                    </van-row>
                    <van-row>
                        <van-col span="12"><lable >无最低消费限制|建议2-6人</lable></van-col>
                        <van-col span="12"><van-button round type="primary" style="height: 2rem;background-color: orange;border: none;" @click="tzpay()">预定</van-button></van-col>
                    </van-row>
                    <van-row>
                        <van-col span="6"><lable style="color:red;">￥50</lable>预付定金</van-col>
                    </van-row>
                </van-tab>
            </van-tabs>
            <div>
                <van-cell style="font-size: 20px" value="精选评价(183)" is-link />
                <button>放松舒服(32)</button><button>环境很好(28)</button><button>服务热情(14)</button><br>
                <button>体验很棒(22)</button><button>性价比高(9)</button><button>结伴同行(7)</button>
            </div>
            <div class="pinglun">
                <van-row>
                    <van-rol span="12"> <img style="width: 50px;height:50px;" :src="playdetail.imgurl"/></van-rol>
                    <van-rol span="12"><h3>{{playdetail.mingzi}}</h3></van-rol>
                </van-row>
                <p style="text-align: left;margin-left: 50px;margin-right: 50px">&nbsp;&nbsp;&nbsp;&nbsp;{{playdetail.comment}}</p>
                <img :src="playdetail.imgurl3"/>
                <img :src="playdetail.imgurl4"/>
                <img :src="playdetail.imgurl5"/>
            </div>
        </div>
        <div>
        </div>
    </div>
</template>

<script>
    import { ref } from 'vue';
    export default {
        name: "PlayDetail",
        data(){
            return{
                playdetail:{

                },
            }
        },
        setup() {

            const value = ref(3);
            return { value };
            // const images = [
            //     'https://cdn.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
            //     'https://cdn.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
            // ];
            // return { images };
            },
        mounted(){
            // this.axios.get("/api/detail/query.do").then(res=>{
            //     if(res.data.code==200){
            //         this.playdetail=res.data.data;
            //     }
            // });
            var id=this.$route.query.id;
            var url="/api/detail/query.do";
            this.axios.get(url+"?id="+id).then(res=>{
                if(res.data.code==200){
                    //成功
                    this.playdetail=res.data.data;

                }else{
                    //失败
                    Toast('亲，网络异常！');
                }
            })
        },
        methods:{
            tzback(){
                history.back();
            },
            tzpay(){
                this.$router.push({path:"/playpay",query:{money:this.playdetail.price,title:this.playdetail.title}});
            }
        }
    }
</script>

<style scoped>
    .img1{
        width: 100%;
        height: 14rem;
    }
    van-card{
        font-size: 3px;
    }
    button{
        margin:15px;
        border-radius: 15px;
        border: none;
        font-size: 15px;
        background-color: gainsboro;
    }
    .pinglun img{
        margin: 10px;
        width: 100px;
        height: 100px;
    }

</style>